<template>
  <div>
    <div  >
      <div   class="backBtn" @click="jumpUrl">
        <i  class="icon iconfont icon-back"></i>
      </div>
      <div  class="wrapper bg_1">
        <span  class="shareGuide"><i  class="icon iconfont icon-zhiyin"></i></span>
        <!-- <div  class="nickBox">
          <div  class="nickInfo">
            <span  class="imgBox"><img  :src="datainfo.headImg" alt=""></span><span >{{datainfo.nickName}}</span>
          </div>
          <span  class="nickTitle">邀您注册乐慧城市</span>
        </div> -->
        <div  class="qrcodeBox">
          <img  :src="qrcode"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MemberBaseInfoUrl,bbCreateQR } from "@/api/axiosFun"
import { Toast } from 'vant';

export default {
  name: "qrcodeTuijian",
  data() {
    return {
      bannerList: [],
      page:1,
      pageSize:100,
      traderType:"",
      cityId:"",
      orderNum:false,
      Latitude:"",
      Longitude:"",
      nowurl:"http://ui.lehuichengshi.com",
      qrcode:'/static/img/erweima.png',
      datainfo:{}
    };
  },
  mounted() {
    if(localStorage.getItem("userinfo")){
        this.datainfo = JSON.parse(localStorage.getItem("userinfo"));
        this.nowurl = this.nowurl+"?fid=0";
      }
    //this.init();
  },
  methods: {
    init() {
      // MemberBaseInfoUrl().then(res=>{
      //       console.log(res);
      //      if(res.data.errCode == 0){
      //          this.datainfo = res.data.data;
      //          this.nowurl = this.nowurl+"?fid="+this.datainfo.id;
      //      }
      //   },error=>{
      //       Toast(res.data.errMsg);
      //       return
      //   }) 
      
      bbCreateQR(this.nowurl).then(res=>{
            console.log(res);
           if(res.status == 200){
               //this.qrcode = res.data;
           }
        },error=>{
            Toast(res.data.errMsg);
            return
        }) 
    },
    jumpUrl(){
      this.$router.replace({ name: "my"});
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backBtn {
    width: 1.25rem;
    height: 1.25rem;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,170,255,.5)),to(rgba(0,133,255,.5)));
    background: linear-gradient(90deg,rgba(0,170,255,.5),rgba(0,133,255,.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: .44rem;
    left: .44rem;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
}
.wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-clip: content-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-origin: content-box;
    font-size: .36rem;
    color: #fff;
}
.wrapper.bg_1 {
    background-image: url(/static/img/tuijian_qrcode.jpg);
}
.wrapper .shareGuide {
    width: .6rem;
    height: .6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .7rem;
    color: hsla(0,0%,100%,.6);
    position: absolute;
    top: .1rem;
    right: .6rem;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wrapper .shareGuide i {
    font-size: inherit;
}
.nickBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    text-align: center;
    padding: .1rem .3rem;
    font-size: .28rem;
    margin: .6rem 0;
}
.nickBox .nickInfo {
    color: #fff;
    padding-bottom: .2rem;
}
.nickBox .nickInfo span {
    font-size: .36rem;
}
.nickBox .nickInfo .imgBox {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    margin-bottom: .2rem;
}
.nickBox .nickInfo .imgBox img {
    width: 100%;
}
.nickBox .nickInfo span {
    font-size: .36rem;
}
.nickBox .nickTitle {
    display: block;
    font-size: .42rem;
    line-height: .4rem;
    color: #fff;
    font-weight: 700;
    padding: .1rem 0 .05rem;
    letter-spacing: 2px;
}
.qrcodeBox {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    width: 5rem;
    height: 5rem;
    margin-left: -2.5rem;
    border-radius: .5rem;
}
.qrcodeBox img {
    width: 100%;
    opacity: .9;
    border-radius: .5rem;
}
</style>
